<!-- Datatables -->
<link href="cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>
<link href="/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<!-- Select2 -->
<link href="/plugins/select2/css/select2.min.css" rel="stylesheet">
<link href="/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css" rel="stylesheet"/>
<!-- page content -->
<div id="PapersModelDiv" class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>Approvals<small></small></h3>
            </div>

        </div>

        <div class="clearfix"></div>

        <div class="row">
            <div class="col-md-12 col-sm-12 ">
                <div class="x_panel">
                    <div class="x_title">
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" href="#">Settings 1</a>
                                    <a class="dropdown-item" href="#">Settings 2</a>
                                </div>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>

                    <div class="x_content">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card-box table-responsive">
                                    <p class="text-muted font-13 m-b-30">
                                    </p>
                                    <table id="modelTable" class="table table-striped table-bordered"
                                           style="width:100%">
                                        <thead>
                                        <tr>
                                            <th>审批编号</th>
                                            <th>试卷标题</th>
                                            <th>考试时间</th>
                                            <th>试卷总分</th>
                                            <th>用户名</th>
                                            <th>审批状态</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>

                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--引入模态框-->
    <div th:replace="exam/approvalModal"></div>
</div>

<!-- Datatables -->
<script src="/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

<script type="text/javascript">
    var modelVue = new Vue({
        el: "#PapersModelDiv",
        data: {
            // 默认页长
            defaultPageSize: 5,
            // 定义本页操作的模型
            model: {
                id:"",
                subject: "",
                totalTime: "",
                totalScore: "",
                userName: "",
                status: "",
            },
            // 定义searchBean
            searchBean: {
                currentPage: 1,
                pageSize: 5,
                orderBy: "totalTime",  // id
                direction: "asc",
                keyWord: "",
            },
            // 定义表格数据结构
            tableData: {
                draw: 0,
                recordsTotal: 0,
                recordsFiltered: 0,
                data: [],
            },
        },
        methods: {

            // 行数据结构定义函数
            rowData: function (id, subject, totalTime, totalScore, userName, status) {
                var self = this;
                //新创建一个行的js对象
                var row = {};
                row.id = id;
                row.subject = subject;
                row.totalTime = totalTime;
                row.totalScore = totalScore;
                row.userName = userName;
                row.status = status;//
                row.operate = function () {
                    return (
                        "<button\n" +
                        "                                type=\"button\"\n" +
                        "                                class=\"btn btn-primary\"\n" +
                        "                                data-toggle=\"modal\"\n" +
                        "                                data-target=\"#modalAdd\"\n" +
                        "                                onclick='addModal("+id+")'>\n" +
                        "                            审批\n" +
                        "                        </button>"
                    );
                };
                return row;
            },
            // 初始化表格数据
            initTable: function (pageSize) {
                var self = this;
                //DataTable是引入的函数
                $("#modelTable").DataTable({
                    paging: true, //分页
                    serverSide: true, //开启后端分页
                    pagingType: "full_numbers", //分页样式的类型simple/simple_numbers/full/full_numbers
                    pageLength: pageSize, //定义初始的页长
                    processing: true,
                    destroy: true, //允许销毁替换，在表格重新查询时，可以自动销毁以前的data
                    lengthChange: true, //控制是否能够调整每页的条数
                    lengthMenu: [5, 10, 25, 50], // 控制页长(页码的选择)
                    searching: true,
                    "data-show-refresh": true,
                    ordering: true,
                    autoWidth: true,
                    ajax: function (data, callback, settings) {
                        // 从data获取查询数据，包装searchBean
                        var columnIndex = data.order[0].column;//当前操作列的下标
                        var direction = data.order[0].dir;
                        var orderBy = data.columns[columnIndex].name;
                        pageSize = data.length == undefined ? pageSize : data.length;

                        self.searchBean.currentPage = data.start / pageSize + 1;//当前页
                        self.searchBean.pageSize = pageSize;
                        self.searchBean.orderBy = orderBy;
                        self.searchBean.direction = direction;
                        self.searchBean.keyWord = data.search.value;

                        $.ajax({
                            url: "/api/approvals",
                            type: "post",
                            contentType: "application/json",
                            data: JSON.stringify(self.searchBean),
                            success: function (result) {
                                // console.log("result:",result);
                                //定义一个数组来装行数据
                                var rowsData = [];
                                $.each(result.list, function (i, item) {
                                    //调用定义行数据的函数，包装行数据(需要按表格标题顺序)
                                    var rowData = self.rowData(
                                        item.id,
                                        item.paper.subject,
                                        item.paper.totalTime,
                                        item.paper.totalScore,
                                        item.user.userName,
                                        item.status
                                    );
                                    // 将行数据放到数组里
                                    rowsData.push(rowData);
                                });
                                //赋值给表格的数组结构
                                self.tableData.data = rowsData;
                                self.tableData.recordsTotal = result.total;
                                self.tableData.recordsFiltered = result.total;
                                callback(self.tableData);
                            },
                        })
                    },
                    //列的定义
                    columns: [
                        //定义行数据字段
                        {data: "id", name: "id", sortable: true},//可排序
                        {data: "subject", name: "subject", sortable: true},
                        {data: "totalTime", name: "total_time", sortable: true},
                        {data: "totalScore", name: "total_score", sortable: true},
                        {data: "userName", name: "user_name", sortable: true},
                        {data: "status", name: "status", sortable: true},
                        {data: "operate", width: "80px", sortable: false},
                    ],
                });
            },
            // 清除上一次的值
            addModal: function (val) {
                // console.log("val",val);
                var self = this;
                self.model.id = val;
            },
            approvalModal: function () {
                var self = this;
                console.log("self",self.model);
                var status = self.model.status;
                var id = self.model.id;
                console.log("status",status);
                console.log("id",id);
                $.ajax({
                    url: "/api/approval",
                    type: "post",
                    contentType: "application/json",
                    data: JSON.stringify(self.model),
                    success: function (result) {
                        if (result.status == 200){
                            alert("审批成功",{icon:0});
                            window.location.href = "/exam/approvals";
                        }
                    }
                })
            }
        },
        created: function () {
            window.addModal = this.addModal;
        },
        //页面加载时调用函数
        mounted: function () {
            this.initTable(this.defaultPageSize);
        },
    });
</script>
